<template>
  <div class="container">
    <!-- 登录按钮部份 -->
    <div class="center-view-login">
      <img src="http://www.mobiletrain.org/images_index/right-fixed-face.png" alt="" />
      <!-- 是否已经登录 -->
      <showLoginBtn />
    </div>
    <van-grid :column-num="2" :border="false">
      <van-grid-item icon="photo-o" text="文字" />
      <van-grid-item icon="photo-o" text="文字" />
    </van-grid>
    <div class="setttings">
      <van-cell title="电影订单" is-link @click="goTargetUrl('/order')">
        <template #icon>
          <van-icon name="like" class="icon" />
        </template>
      </van-cell>
      <van-cell title="在线客服" is-link @click="goTargetUrl('/kefu')">
        <template #icon>
          <van-icon name="star" class="icon" />
        </template>
      </van-cell>
      <van-cell title="个人设置" is-link @click="goTargetUrl('/setting')">
        <template #icon>
          <van-icon name="setting" class="icon" />
        </template>
      </van-cell>
      <van-cell v-if="isLogin" :center="true" class="logout">
        <template #title>
          <div @click="logout">立即退出</div>
        </template>
      </van-cell>
    </div>
  </div>
</template>

<script>
import showLoginBtn from './ui/showLoginBtn.vue'
import { createNamespacedHelpers } from 'vuex'
const { mapState, mapMutations } = createNamespacedHelpers('center')
export default {
  components: {
    showLoginBtn
  },
  computed: {
    ...mapState(['token', 'nickname']),
    isLogin() {
      return this.token ? true : false
    }
  },
  methods: {
    ...mapMutations(['logoutAction']),
    goTargetUrl(url) {
      this.$store.commit('setLoginRedirectUrl', url)
      this.$router.push(url).catch(() => {})
    },
    async logout() {
      try {
        let ret = await this.$dialog.confirm({
          title: '退出确认',
          message: '您真的要退出本次登录吗？'
        })
        // 确定点击退出，完成对应的退出工作
        this.logoutAction()
      } catch (error) {}
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  background: #f4f4f4;

  .center-view-login {
    text-align: center;
    height: 200px;
    background: url(https://assets.maizuo.com/h5/v5/public/app/img/bg.a5bdd690.png);
    background-size: cover;
    display: flex;
    align-items: center;
    img {
      margin-left: 20px;
      width: 80px;
      height: 80px;
    }
    div {
      margin-left: 20px;
      font-size: 18px;
      color: white;
    }
  }
  .setttings {
    margin-top: 20px;
  }
  .icon {
    font-size: 20px;
    width: 20px;
    height: 20px;
    color: red;
    font-weight: bold;
    margin-right: 10px;
  }
  .logout {
    text-align: center;
  }
}
</style>
